<template>
	<view class="cons_con">
		<view class="conscon1">
			<u-sticky>
				<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
					:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="currentTab"
					@click=" tabClick"></u-tabs>
			</u-sticky>
		</view>

		<view class="add_list">
			<image class="add_li_img" :src="po48" mode="" v-if="list3 !=''"></image>
			<view class="group_9" v-else>
				<u-empty text="此楼层无美食地图" icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
			</view>
			<view class="add_li_right" v-for="(item,index) in list3" :key="index" :class="{ resize: index === gjindex }" 
				@click="loucheng(item,index)">
				{{item.name}}F
			</view>
			
		</view>

		<view class="conscon2">
			<!-- <u-sticky> -->
			<u-tabs :list="list2" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }" scrollable
				:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="current_Tab"
				@click=" tab_Click"></u-tabs>
			<!-- </u-sticky> -->
		</view>

		<view class="group_6" v-for="(item,index) in splist" :key="index" v-if="splist != null"
			@click="onfood(item,index)">
			<view class="block_3">
				<image :src="item.img" mode=""></image>
			</view>
			<view class="block_4">
				<view class="group_77">
					<view class="group_ads">
						<text lines="1" class="text_11">{{item.name}}</text>
						<view class="group_adstex">
							{{item.cate_name}}
						</view>
					</view>
					<text class="text_17">¥{{item.per}}</text>
				</view>
				<view class="text-wrapper_4">
					<text lines="1" class="text_12">{{item.open}}</text>
					<text lines="1" class="text_13">{{item.open_time}}</text>
				</view>
				<view class="image-text_1">
					<image
						src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/227be38665aa428ab14d5e0890edca87_mergeImage.png"
						class="label_4"></image>
					<text lines="1" class="text-group_1">{{item.pos}}</text>
				</view>
				<view class="group_7">
					<view class="text-wrapper_5" v-for="(im,inx) in item.marks.slice(0, 2)" :key="inx">
						<text lines="1" class="text_14">{{im}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="group_9" v-if="splist == null">
			<u-empty text="此楼层无美食" icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
		</view>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	export default {
		data() {
			return {
				po48: '',
				po50: this.$https.assetsPath + 'po50.png',
				list1: [],
				list2: [],
				currentTab: 0,
				current_Tab: 0,
				gjindex: '',
				list3: [],
				cate_id: '',
				floorindex: '',
				splist: [],
				venue_id:''
			};
		},
		onLoad(options) {
			this.getSeCondVenue()
		},
		onShow() {
		},
		methods: {
			// 获取分类商品
			async getSeCondVenue() {
				// this.po48 = ''
				// this.list2 = []
				// this.splist = []
				// this.gjindex = 0
				// this.current_Tab = 0
				let data = {}
				let result = await subscribe.getSeCondVenue(data)
				if (result.code == 1) {
					this.list1 = result.data
					this.list3 = result.data[0].floor
					this.po48 = result.data[0].floor[0].field_img
					this.venue_id = result.data[0].id
					// this.floorindex = result.data[0].floor[0].name
					this.getVenueCate()
				}
			},
			// 获取商铺分类
			async getVenueCate() {
				let data = {}
				let result = await subscribe.getVenueCate(data)
				if (result.code == 1) {
					this.list2 = result.data
					this.cate_id = result.data[0].id
					this.getShop()
				}
			},
			// 获取店铺商品
			async getShop() {
				let data = {
					venue_id: this.venue_id,
					floor: this.floorindex,
					cate_id: this.cate_id,
				}
				let result = await subscribe.getShop(data)
				if (result.code == 1) {
					this.splist = result.data
				}
			},
			onfood(item, index) {
				uni.navigateTo({
					url: './food_mapdetail?foodid=' + item.id
				})
			},
			loucheng(item, index) {
				// this.current_Tab = 0
				this.gjindex = index
				this.po48 = item.field_img
				this.floorindex = item.name
				// this.getVenueCate()
			},
			tabClick(item) {
				this.po48 = ''
				this.list2 = []
				this.splist = []
				this.gjindex = 0
				this.current_Tab = 0
				this.currentTab = item.index;
				this.list3 = item.floor
				this.po48 = item.floor[0].field_img
				this.venue_id = item.id
				this.floorindex = item.floor[0].name
				this.getVenueCate()
			},
			tab_Click(item) {
				this.splist = []
				this.current_Tab = item.index;
				this.cate_id = item.id
				this.getShop()
			},
		}
	};
</script>

<style lang="less" scoped>
	.cons_con {
		.add_list {
			position: relative;
			width: 710rpx;
			height: 420rpx;
			margin: 0 auto;

			.add_li_img {
				width: 710rpx;
				height: 420rpx;
				margin: 0 auto;
			}

			.add_li_right {
				position: absolute;
				z-index: 9;
				right: 20rpx;
				width: 62rpx;
				height: 62rpx;
				border: 1rpx #b1b1b1 solid;
				top: 180rpx;
				background-color: #fff;
				line-height: 62rpx;
				text-align: center;
				margin-top: 62rpx;
				font-size: 26rpx;
			}

			.resize {
				color: #4BA677;
			}

			/* 根据索引值设置不同的垂直偏移 */
			.add_li_right:nth-child(1) {
				top: 30rpx;
			}

			.add_li_right:nth-child(2) {
				top: 60rpx;
				/* 根据需求调整偏移量 */
			}

			.add_li_right:nth-child(3) {
				top: 120rpx;
				/* 根据需求调整偏移量 */
			}
		}

		.conscon1 {
			padding: 0 0 20rpx 0;

			/deep/.u-tabs {
				background-color: #fff;
				// margin: 0 30rpx;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}

		// .conscon2 {
		// 	padding: 20rpx 0 20rpx 0;

		// 	/deep/.u-tabs {
		// 		background-color: #fff;
		// 		// margin: 0 30rpx;

		// 		.u-tabs__wrapper__nav__item {
		// 			flex: 1;
		// 		}

		// 		.u-tabs__wrapper__nav__line {
		// 			bottom: 0;
		// 		}
		// 	}
		// }

		.group_6 {
			background-color: rgba(255, 255, 255, 1.0);
			width: 710rpx;
			padding-bottom: 20rpx;
			flex-direction: row;
			display: flex;
			justify-content: flex-start;
			margin: 28rpx auto 0;
			border-bottom: 1rpx #b1b1b1 solid;
		}

		.group_9 {
			background-color: rgba(255, 255, 255, 1.0);
			width: 710rpx;
			padding-bottom: 20rpx;
			flex-direction: row;
			display: flex;
			margin: 28rpx auto 0;
			justify-content: center;

		}

		.block_3 {
			width: 280rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;

			image {
				width: 280rpx;
				height: 200rpx;
				border-radius: 12rpx;
			}
		}

		.block_4 {
			display: flex;
			flex-direction: column;
			margin: 10rpx 0 10rpx 20rpx;
			flex: 1;
		}

		.text_11 {
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 40rpx;
			font-weight: 600;
		}

		.text-wrapper_4 {
			width: 364rpx;
			flex-direction: row;
			display: flex;
			// justify-content: space-between;
			margin: 10rpx 0 0 0;
		}

		.text_12 {
			overflow-wrap: break-word;
			color: rgba(75, 166, 119, 1.0);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
		}

		.text_13 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 28rpx;
			margin-left: 10rpx;
		}

		.image-text_1 {
			width: 138rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 18rpx 0 0 0;
		}

		.label_4 {
			width: 24rpx;
			height: 24rpx;
		}

		.text-group_1 {
			overflow-wrap: break-word;
			color: rgba(102, 102, 102, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 22rpx;
			margin-top: 2rpx;
		}

		.group_7 {
			margin-top: 16rpx;
			flex-direction: row;
			display: flex;
		}

		.group_77 {
			flex-direction: row;
			display: flex;
			justify-content: space-between;
		}

		.group_ads {
			flex-direction: row;
			display: flex;
			justify-content: flex-end;
		}

		.group_adstex {
			border-radius: 4rpx;
			border: 1rpx solid #4BA677;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #4BA677;
			line-height: 22rpx;
			text-align: center;
			font-style: normal;
			padding: 5rpx 10rpx;
			display: flex;
			align-items: center;
			margin-left: 10rpx;
		}

		.text-wrapper_5 {
			background-color: rgba(230, 230, 230, 0.6);
			border-radius: 4rpx;
			margin-top: 14rpx;
			display: flex;
			flex-direction: column;
			padding: 7rpx 11rpx 7rpx 11rpx;
			margin-right: 10rpx;
		}

		.text_14 {
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: right;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.text-wrapper_6 {
			background-color: rgba(230, 230, 230, 0.6);
			border-radius: 4rpx;
			display: flex;
			flex-direction: column;
			margin: 14rpx 0 0 10rpx;
			padding: 7rpx 12rpx 7rpx 12rpx;
		}

		.text_15 {
			overflow-wrap: break-word;
			color: rgba(153, 153, 153, 1);
			font-size: 22rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: right;
			white-space: nowrap;
			line-height: 22rpx;
		}

		.text-wrapper_7 {
			margin-left: 80rpx;
			display: flex;
			flex-direction: column;
			padding: 13rpx 34rpx 13rpx 34rpx;
			background: linear-gradient(135deg, #6BD3A6 0%, #56BF89 100%), #56BF89;
			border-radius: 10rpx;
		}

		.text_16 {
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 26rpx;
			font-family: PingFangSC-Regular;
			font-weight: normal;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
		}

		.text_17 {
			// width: 97rpx;
			// height: 22rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #4BA677;
			// line-height: 22rpx;
			// font-style: normal;
		}
	}
</style>